<template>
    <div id="temp">
        <div class="stuInfo">
            <div class="tit">
                <span>教材详情</span>
                <span class="icon" @click="editTextbook()"></span>
            </div>
            <el-row>
                <el-col :span="7">
                    <div>
                        <el-col :span="10">
                            <span class="left">类别：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{DetailData.sort}}</span>
                        </el-col>
                    </div>
                    <div>
                        <el-col :span="10">
                            <span class="left">书名：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{DetailData.name}}</span>
                        </el-col>
                    </div>
                </el-col>
                <el-col :span="7">
                    <div>
                        <el-col :span="10">
                            <span class="left">编著(译)：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{DetailData.compiler}}</span>
                        </el-col>
                    </div>
                    <div>
                        <el-col :span="10">
                            <span class="left">出版社：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{DetailData.press}}</span>
                        </el-col>
                    </div>
                </el-col>
                <el-col :span="7">
                    <div>
                        <el-col :span="10">
                            <span class="left">出版日期：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{DetailData.date}}</span>
                        </el-col>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="record">
            <el-tabs type="border-card" @tab-click="formChange" activeName="Purchase">
                <el-tab-pane label="采购记录" name="Purchase">
                    <table class="tab-table">
                        <thead>
                        <tr>
                            <th width="10%">
                                <span class="icon add" @click="OpenAddPurchasee()"></span>
                            </th>
                            <th width="5%">序号</th>
                            <th>购买时间</th>
                            <th>单价</th>
                            <th>购买数量</th>
                            <th>总价</th>
                            <th>备注</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in list" :key="item.id">
                            <td>
                                <span class="icon edit" @click="EditPurchasee(item.id)"></span>
                                <span class="icon del" @click="Del(item.id,'textbookPurchase')"></span>
                            </td>
                            <td>{{index + 1}}</td>
                            <td>{{item.buy_date}}</td>
                            <td>{{item.quantity}}</td>
                            <td>{{item.price}}</td>
                            <td>{{item.quantity * item.price}}</td>
                            <td>{{item.comment}}</td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="库存管理" name="Inventory">
                    <table class="tab-table">
                        <thead>
                        <tr>
                            <th width="10%">
                                <el-button type="text" @click="openAddInventory()"><span class="icon add"></span>
                                </el-button>
                            </th>
                            <th width="5%">序号</th>
                            <th>上月结存</th>
                            <th>本月入库</th>
                            <th>现库存量</th>
                            <th>本月耗用</th>
                            <th>用途</th>
                            <th>库存价值</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in list" :key="item.id">
                            <td>
                                <span class="icon edit" @click="editInventory(item.id)"></span>
                                <span class="icon del" @click="Del(item.id,'textbookInventory')"></span>
                            </td>
                            <td>{{index + 1}}</td>
                            <td>{{item.last_month}}</td>
                            <td>{{item.month_entrance}}</td>
                            <td>{{item.now}}</td>
                            <td>{{item.current_month}}</td>
                            <td>{{item.purpose}}</td>
                            <td>{{item.value}}</td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog title="资料信息" :visible.sync="pop" size="tiny">
            <el-form :model="EditForm" :label-width="width" :rules="TextbookRules" ref="TextbookRulesName">
                <el-form-item label="类别">
                    <el-col :span="span">
                        <el-select v-model="EditForm.sort" placeholder="请选择" size="small">
                            <el-option v-for="item in type" :label="item" :value="item" :key="item"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-col :span="span">
                        <el-input v-model="EditForm.name" size="small" placeholder="请输入名称"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="编著">
                    <el-col :span="span">
                        <el-input v-model="EditForm.compiler" size="small" placeholder="请输入编著"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="出版社">
                    <el-col :span="span">
                        <el-input v-model="EditForm.press" size="small" placeholder="请输入出版社"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="出版日期">
                    <el-col :span="span">
                        <el-input v-model="EditForm.date" size="small" placeholder="请输入出版日期"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="pop = false">取 消</el-button>
                <el-button type="primary" @click="ChangeTextbook()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="采购记录" :visible.sync="purchasePop" size="tiny">
            <el-form :model="purchaseAdd" :label-width="width" :rules="PurchaseeRules" ref="PurchaseeRulesName">
                <el-form-item label="购买日期">
                    <el-col :span="span">
                        <el-date-picker type="date" size="small" placeholder="选择日期" v-model="purchaseAdd.buy_date"
                                        style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="单价">
                    <el-col :span="span">
                        <el-input v-model="purchaseAdd.price" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="购买数量" prop="quantity">
                    <el-col :span="span">
                        <el-input v-model="purchaseAdd.quantity" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="备注">
                    <el-col :span="span">
                        <el-input v-model="purchaseAdd.comment" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="purchasePop = false">取 消</el-button>
                <el-button type="primary" @click="ChangePurchasee()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="库存管理记录" :visible.sync="inventoryPop" size="tiny">
            <el-form :model="inventoryAdd" :label-width="width" :rules="inventoryRules" ref="inventoryRulesName">
                <el-form-item label="上月结存">
                    <el-col :span="span">
                        <el-input v-model="inventoryAdd.last_month" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="本月入库">
                    <el-col :span="span">
                        <el-input v-model="inventoryAdd.month_entrance" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="现库存量" prop="now">
                    <el-col :span="span">
                        <el-input v-model="inventoryAdd.now" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="本月耗用">
                    <el-col :span="span">
                        <el-input v-model="inventoryAdd.current_month" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="用途">
                    <el-col :span="span">
                        <el-input v-model="inventoryAdd.purpose" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="库存价值">
                    <el-col :span="span">
                        <el-input v-model="inventoryAdd.value" size="small" auto-complete="off"
                                  placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="inventoryPop = false">取 消</el-button>
                <el-button type="primary" @click="ChangeInventory">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    const DetailData = {
        sort: "",
        name: "",
        compiler: "",
        press: "",
        date: ""
    };
    const inventory = {
        last_month: "",
        month_entrance: '',
        now: "",
        current_month: "",
        purpose: "",
        value: ""
    };
    const Purchase = {
        buy_date: "",
        price: "",
        quantity: "",
        comment: ""
    };
    export default {
        data() {
            return {
                type: ["海事局课程", "船东课程", "电子海图品牌课程", "新海联课程"],
                width: "200px",
                span: 15,
                id: "",
                list: {},
                EditForm: {},

                pop: false,
                DetailData: _g.cloneJson(DetailData),
                TextbookRules: {
                    name: [{required: true, message: "请填写名称", trigger: "blur"}]
                },

                inventoryPop: false,
                inventoryAdd: _g.cloneJson(inventory),
                inventoryRules: {
                    now: [{required: true, message: "请填写现库存量", trigger: "blur"}]
                },
                purchasePop: false,
                purchaseAdd: _g.cloneJson(Purchase),
                PurchaseeRules: {
                    quantity: [{required: true, message: "请填写数量", trigger: "blur"}]
                }
            };
        },

        created() {
            this.id = this.$route.params.id;
            this.getDetailData();
            this.getList("textbookPurchase");
        },

        methods: {
            formChange(item) {
                if (item.name === "Purchase") {
                    this.getList("textbookPurchase");
                } else if (item.name === "Inventory") {
                    this.getList("textbookInventory");
                }
            },

            /* 获取数据 */
            getDetailData() {
                let data = {id: this.id};
                this.apiPost("Operation/textbookDetail", data).then(res => {
                    this.DetailData = res;
                });
            },
            getList(action) {
                let data = {pid: this.id};
                this.apiPost("Operation/" + action, data).then(res => {
                    this.list = res;
                });
            },

            /* 打开编辑窗口 */
            editTextbook() {
                let data = {id: this.id};
                this.apiPost("Operation/textbookDetail", data).then(res => {
                    setTimeout(() => {
                        this.pop = true;
                        setTimeout(() => {
                            this.$refs.TextbookRulesName.resetFields();
                            this.EditForm = res;
                        }, 0);
                    }, 0);
                });
            },
            EditPurchasee(id) {
                let data = {id: id};
                this.apiPost("Operation/textbookPurchaseDetail", data).then(res => {
                    setTimeout(() => {
                        this.purchasePop = true;
                        setTimeout(() => {
                            this.$refs.PurchaseeRulesName.resetFields();
                            this.purchaseAdd = res;
                        }, 0);
                    }, 0);
                });
            },
            editInventory(id) {
                let data = {id: id};
                this.apiPost("Operation/textbookInventoryDetail", data).then(res => {
                    setTimeout(() => {
                        this.inventoryPop = true;
                        setTimeout(() => {
                            this.$refs.inventoryRulesName.resetFields();
                            this.inventoryAdd = res;
                        }, 0);
                    }, 0);
                });
            },

            /* 删除 */
            Del(id, action) {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        let data = {id: id};
                        this.apiPost("Operation/" + action + "Delete", data).then(res => {
                            if (!res.error) {
                                this.$message({
                                    type: "success",
                                    message: res.msg
                                });
                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.msg
                                });
                            }
                            this.getList(action);
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },
            /* 提交数据 */
            ChangeTextbook() {
                this.$refs.TextbookRulesName.validate(valid => {
                    if (valid) {
                        this.pop = false;
                        let data = this.EditForm;
                        this.apiPost("Operation/textbookEdit", data).then(res => {
                            let remind = res.error ? "error" : "success";
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                this.getDetailData();
                            } else {
                                this.pop = true;
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            ChangePurchasee() {
                this.$refs.PurchaseeRulesName.validate(valid => {
                    if (valid) {
                        this.purchasePop = false;
                        let data = this.purchaseAdd;
                        data.pid = this.id;
                        this.apiPost("Operation/textbookPurchaseEdit", data).then(res => {
                            let remind = res.error ? "error" : "success";
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                this.getList("textbookPurchase");
                            } else {
                                this.purchasePop = true;
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            ChangeInventory() {
                this.$refs.inventoryRulesName.validate(valid => {
                    if (valid) {
                        this.inventoryPop = false;
                        let data = this.inventoryAdd;
                        data.pid = this.id;
                        this.apiPost("Operation/textbookInventoryEdit", data).then(res => {
                            let remind = res.error ? "error" : "success";
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                this.getList("textbookInventory");
                            } else {
                                this.inventoryPop = true;
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },

            /* 打开新增窗口 */
            OpenAddPurchasee() {
                this.purchaseAdd = _g.cloneJson(Purchase);
                this.purchasePop = true;
                this.$refs.PurchaseeRulesName.resetFields();
            },
            openAddInventory() {
                this.inventoryAdd = _g.cloneJson(inventory);
                this.inventoryPop = true;
                this.$refs.inventoryRulesName.resetFields();
            }
        }
    };
</script>

<style scoped>
    .headPic {
        padding: 0;
    }

    .headPic img {
        margin-left: 50px;
        width: 50%;
    }

    .add {
        width: 25px;
        height: 25px;
    }

    .stuInfo {
        margin-bottom: 20px;
    }
</style>